<template>
    <l-page class="block pb-3 overflow-auto" :style="style">
        <l-navbar :title="detail.name" />
        <view class="m-3 mt-8">
            <view class="text-yellow-500 text-shadow text-2xl font-bold">
                {{ detail.name }}
            </view>
            <view class="text-white text-shadow text-xl">{{ detail.subject }}</view>
            <view class="bg-blue-300 rounded mt-2 p-3 text-white">
                一站式按揭贷款服务，令您的置业省时、省心、省力、省钱
            </view>
        </view>
        <view class="m-3 loan-desc bg-blue-100 rounded-xl pb-1 relative">
            <l-tab :list="['产品介绍', '准入要求']" v-model="tab"></l-tab>
            <view class="m-3 bg-gray-100 rounded-sm p-3 text-gray-500" v-if="tab == 0">
                <rich-text :nodes="detail.desc" />

            </view>
            <view class="m-3 bg-gray-100 rounded-sm p-3 text-gray-500" v-if="tab == 1">
                <rich-text :nodes="detail.eligibility" />
            </view>
        </view>
        <view class="panel !mb-20">
            <view class="text-lg">申请流程</view>
            <view class="step">
                <view class="item" v-for="item in detail.process_info" :key="item.name">
                    <view class="icon">
                        <u-image :src="$imgBase + item.value" width="32" height="32"></u-image>
                    </view>
                    <view class="text-lg">{{ item.name }}</view>
                </view>
            </view>
        </view>
        <view class="fixed bottom-0 left-0 right-0 flex p-2 bg-white items-center">
            <view class="">
                <u-icon name="kefu-ermai" size="24"></u-icon>
            </view>
            <view class="flex flex-1 ml-3 rounded-full overflow-hidden">
                <!-- <navigator url="/pages/credit-loans/quota-calculation" class="flex-1">
                    <l-button type="warning" custom-style="border-radius:0px">额度测算</l-button>
                </navigator> -->
                <navigator :url="`/pages/credit-loans/loan-application?id=${id}&salesman_id=${salesman_id}`"
                    class="flex-1">
                    <l-button type="error" custom-style="border-radius:0px">立即定制</l-button>
                </navigator>
            </view>
        </view>
    </l-page>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import Loan from "@/stores/loan";

let tab = ref(0), id = ref(''), salesman_id = ref(''), detail = ref<any>({})
const style = reactive({ background: '' });
const getDetail = (id: number) => {
    Loan().getProductdetail(id).then((res: any) => {
        detail.value = res
        style.background = `${res.app_bg_color} url(${import.meta.env.VITE_APP_IMG_URL + res.bg_pic})  center/cover no-repeat`;
    })
}
onLoad((query: any) => {
    id.value = query.id
    salesman_id.value = query.id
    getDetail(query.id)
})
</script>

<style lang="scss" scoped>
.step {
    @apply items-start flex flex-col;

    .item {
        @apply flex items-center h-20 overflow-hidden;

        .icon {
            @apply bg-blue-50 border-2 border-blue-400 rounded-[50%] w-12 h-12 flex items-center justify-center mr-2 relative;

            &:before,
            &:after {
                content: '';
                @apply block w-[2rpx] absolute left-1/2 -ml-[1rpx] h-5 bg-blue-400;
            }

            &:before {
                @apply bottom-full;
            }

            &:after {
                @apply top-full;
            }
        }

        &:first-child {
            .icon {
                &:before {
                    display: none;
                }
            }
        }

        &:last-child {
            .icon {
                &:after {
                    display: none;
                }
            }
        }
    }
}
</style>